import { stringifyStyle } from '@vue/shared'

let echarts = require('echarts/lib/echarts')
let json2 = require('@/common/js/aq.json')

var qy = ""
var jh = ""

export default{
    qy:function () {
        return qy;
    },
    jh:function () {
        return jh;
    },
    echart_3:function() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_3'));
            myChart.on('click',function(params){
                qy = params.name
            })
            echarts.registerMap('aq',json2);
            myChart.setOption({
                    title:{
                        text:'设备分布',
                        subtext:'',
                        x:'center',
                        textStyle:{
                            color:'#FFF'
                        },
                        left:'6%',
                        top:'10%'
                    },
                    visualMap:{
                        show:false,
                        min:500,
                        max:500,
                        left:'left',
                        top:'bottom',
                        text:['高','低'],
                        calculable:true,
                        seriesIndex:[1],
                        inRange:{}
                    },
                    legend:{
                        orient:'vertical',
                        y:'bottom',
                        x:'right',
                        data:['pm2,5'],
                        textStyle:{
                            color:'#fff'
                        }

                    },
                    itemStyle: {
                    },
                    series: [{
                        name:'安庆市',
                        label: {
                        normal: {
                            show: true,
                            textStyle:{color:'#fff'}
                        },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle:{
                            color: '#ddb926',
                            normal: {
                                //          	color: '#ddd',
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        },
                        type: 'map',
                        zoom: 1.2,//缩放比例
                        roam: true,
                        mapType: 'aq',
                        emphasis: {
                            label: {
                                show: true
                            },
                            textStyle:{
                                color:'#fff'
                            }
                        },
                        // 文本位置修正
                        textFixed: {
                            Alaska: [20, -20]
                        },
                        data: [{
                                name: '岳西县',
                                value: 340828
                            },
                            {
                                name: '怀宁县',
                                value: 340822
                            },
                            {
                                name: '潜山县',
                                value: 340882
                            },
                            {
                                name: '太湖县',
                                value: 340825
                            },
                            {
                                name: '宿松县',
                                value: 340826
                            },
                            {
                                name: '望江县',
                                value: 340827
                            },
                            {
                                name: '桐城市',
                                value: 340881
                            },
                            {
                                name: '迎江区',
                                value: 340802
                            },
                            {
                                name: '大观区',
                                value: 340803
                            },
                            {
                                name: '宜秀区',
                                value: 340811
                            }
                        ]
                    }],
                    //右下角数值条
                    tooltip: {
                        trigger: 'item',
                        showDelay: 0,
                        transitionDuration: 0.2,
                        formatter: function(params) {
                            var value = (params.value + '').split('.');
                            value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                            return params.seriesName + '<br/>' + params.name + ': ' + value;
                        }

                    },

                });
    },
    echart_4:function(a,b) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_4'));
            var data = [a, 0, 0, 0, 0];
            var titlename = ['1号机', '2号机', '3号机', '4号机', '5号机'];
            var valdata = [b, 0, 0, 0, 0];
            var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
            // 使用刚指定的配置项和数据显示图表。
            myChart.on('click',function(params){
                jh = params.name
            })
            var option1 ={
                title: {
                    text: '设备电量信息',
                    x: 'center',
                    textStyle: {
                        color: '#FFF'
                    },
                    left: '6%',
                    top: '10%'
                },
                //图标位置
                grid: {
                    top: '20%',
                    left: '32%',
                },
                xAxis: {
                    show: false
                },
                yAxis: [{
                    show: true,
                    data: titlename,
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#fff',
                        formatter: (value, index) => {
                            return [
                                `{lg|${index+1}}  ` + '{title|' + value + '} '
                            ].join('\n')
                        },
                        rich: {
                            lg: {
                                backgroundColor: '#339911',
                                color: '#fff',
                                borderRadius: 15,
                                // padding: 5,
                                align: 'center',
                                width: 15,
                                height: 30
                            },
                        }
                    },


                }, {
                    show: true,
                    inverse: true,
                    data: valdata,
                    axisLabel: {
                        textStyle: {
                            fontSize: 14,
                            color: '#fff',
                        },
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },

                }],
                series: [{
                    name: '条',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: data,
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 20,
                            color: function(params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num]
                            },
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}%'
                        }
                    },
                }, {
                    name: '框',
                    type: 'bar',
                    yAxisIndex: 1,
                    barGap: '-100%',
                    data: [100, 100, 100, 100, 100],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: 'none',
                            borderColor: '#00c1de',
                            borderWidth: 3,
                            barBorderRadius: 15,
                        }
                    }
                }, ]
            }

            myChart.clear();
            myChart.setOption(option1);
    },
    ls:function(date1){
        var myChart = echarts.init(document.getElementById('ls'));
        const colors = ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78'];
        var option = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross'
            },
        },
        grid: {
            right: '20%'
        },
        legend: {
            // selectedMode:'single',
            data: ['温度', '湿度', '信号','光敏','震动','烟雾'],
            textStyle:{
                color:"#FFF"
            },
            selected:{
                '震动':false
            },
        },
        xAxis: [
            {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel:{
                textStyle:{
                    color:'#fff'
                }
            },
            // prettier-ignore
            data:date1[6]
            }
        ],
        yAxis: [
            {
            type: 'value',
            name: '温度',
            position: 'right',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} °C'
            }
            },
            {
            type: 'value',
            name: '湿度',
            position: 'right',
            alignTicks: true,
            offset: 50,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[1]
                }
            },
            axisLabel: {
                formatter: '{value} ml'
            }
            },
            {
            type: 'value',
            name: '信号',
            position: 'left',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[2]
                }
            },
            axisLabel: {
                formatter: '{value} dBm'
            },
            },
            {
            type: 'value',
            name: '光敏',
            position: 'right',
            alignTicks: true,
            offset: 100,
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[3]
                }
            },
            // axisLabel: {
            //     formatter: '{value} °C'
            // },
            },
            {
            type: 'value',
            name: '震动',
            position: 'left',
            offset:57,
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[4]
                }
            },
            // axisLabel: {
            //     formatter: '{value} °C'
            // },
            },
            {
            type: 'value',
            name: '烟雾',
            position: 'left',
            offset:100,
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                color: colors[5]
                }
            },
            // axisLabel: {
            //     formatter: '{value} °C'
            // },
            },
        ],
        series: [
            {name: '温度',type: 'bar',data: date1[0]},
            {name: '湿度',type: 'line',yAxisIndex: 1,data:date1[1]},
            {name: '信号',type: 'line',yAxisIndex: 2,data:date1[2]},
            {name: '光敏',type: 'bar',yAxisIndex: 3,data:[1,1,1,1,1,1,1,1,1,1,1,1]},
            {name: '震动',type: 'line',yAxisIndex: 4,data:date1[4]},
            {name: '烟雾',type: 'line',yAxisIndex: 5,data:date1[5]},
        ]
        };
        myChart.clear();
        myChart.setOption(option);
    },
    xx:function(title,time,data){
        var chartDom = document.getElementById('ls');
        var myChart = echarts.init(chartDom);
        const colors = ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78'];
        var option;
        option = {
        title:{
            top:10,
            left:50,
            text:title+'信息',
            textStyle:{
                fontSize:40,
                color:'#fff',
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross'
            },
        },
        grid: {
            top: 100,
            right:50,
            left:50,
            bottom: 30,
            show:true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
                alignWithLabel: true
            },
            axisLabel:{
                textStyle:{
                    color:'#fff'
                }
            },
            data: time
        },
        yAxis: {
            type: 'value',
            name:title,
            position: 'right',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                color: '#fff'
                }
            },
            axisLabel:{
                textStyle:{
                    color:'#fff'
                },
            }
        },
        series: [
            {
            data: data,
            type: 'line',
            areaStyle: {
                }
            }
        ]
        };
        myChart.clear();
        myChart.setOption(option);
    }

}